<template>
	<van-form ref="vanForm" :show-error-message="false">
		<template v-for="(item, key) in lists">
			<slot v-if="item.fieldType === 'custom'" :name="item.name" v-bind="item"></slot>
			<component v-else :is="item.fieldType" :key="key" :form-data="formData" :item="item"
				@handle-click="handleClick" @handle-click-icon="handleClickIcon" />
		</template>
	</van-form>
</template>
<script>
	import base from "./index.js";
	export default {
		name: "dh-form-index",
		components: {
			DhCell: base.DhCell,
			DhField: base.DhField,
			DhDatePicker: base.DhDatePicker,
			DhPicker: base.DhPicker,
		},
		props: {
			// 表单列表
			lists: {
				type: Object,
				default () {
					return {};
				},
			},
		},
		data() {
			return {
				formData: {}, //form数据
			};
		},
		methods: {
			/**
			 * 收集数据
			 */
			trigger() {
				return new Promise((resolve) => {
					this.$refs.vanForm
						.validate()
						.then(() => {
							resolve(this.formData);
						})
						.catch((err) => {
							this.$toast(err[0].message);
						});
				});
			},
			/**
			 * 点击表单
			 */
			handleClick(item, option) {
				this.$emit("handle-click", item, option);
			},
			/**
			 * 点击icon
			 */
			handleClickIcon(item) {
				this.$emit("handle-click-icon", item);
			},
		},
	};
</script>
<style lang="scss" scoped></style>